<template>
	<view class="s-tag-class" :class="[size?'s-tag-'+size:'s-tag',getClassName(shape,plain),getTypeClass(type,plain)]"
	 @tap="handleClick" v-if="visible">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: "sTag",
		props: {
			type: {
				type: String,
				default: 'primary'
			},
			// '', small
			size: {
				type: String,
				default: ''
			},
			// circle, square，circleLeft，circleRight
			shape: {
				type: String,
				default: 'square'
			},
			//是否空心
			plain: {
				type: Boolean,
				default: false
			},
			//是否可见
			visible: {
				type: Boolean,
				default: true
			}
		},
		methods: {
			handleClick() {
				this.$emit('click')
			},
			getTypeClass: function(type, plain) {
				return plain ? 's-' + type + '-outline' : 's-' + type
			},
			getClassName: function(shape, plain) {
				//circle, square，circleLeft，circleRight
				var className = plain ? 's-tag-outline ' : '';
				if (shape != 'square') {
					if (shape == "circle") {
						className = className + (plain ? 's-tag-outline-fillet' : 's-tag-fillet');
					} else if (shape == "circleLeft") {
						className = className + 's-tag-fillet-left';
					} else if (shape == "circleRight") {
						className = className + 's-tag-fillet-right';
					}
				}
				return className;
			}
		}
	}
</script>
<style lang="scss" scoped>
@import 's-tag.scss';
</style>
